<template>
    <div class="exam-detail">
        <el-card class="detail-card">
            <template #header>
                <div class="card-header">
                    <h2>考试详情</h2>
                    <el-button type="primary" @click="goBack">返回</el-button>
                </div>
            </template>
            <div class="detail-content" v-loading="loading">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="考试名称">{{ examDetail.examName }}</el-descriptions-item>
                    <el-descriptions-item label="考试科目">{{ examDetail.subject }}</el-descriptions-item>
                    <el-descriptions-item label="开始时间">{{ formatDateTime(examDetail.startTime) }}</el-descriptions-item>
                    <el-descriptions-item label="考试时长">{{ examDetail.duration }}分钟</el-descriptions-item>
                    <el-descriptions-item label="总分">{{ examDetail.totalScore }}分</el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <el-tag :type="getStatusType(examDetail.status)">{{ examDetail.status }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>

                <div class="questions-section">
                    <h3>试题列表</h3>
                    
                    <el-empty v-if="!examDetail.questionList || examDetail.questionList.length === 0" description="暂无试题" />
                    
                    <div v-else class="question-list">
                        <div v-for="(question, index) in examDetail.questionList" :key="question.questionId" class="question-item">
                            <el-card class="question-card">
                                <div class="question-header">
                                    <span class="question-index">第{{ index + 1 }}题</span>
                                    <el-tag size="small" :type="getQuestionTypeTag(question.type)">{{ question.type }}</el-tag>
                                    <span class="question-score">{{ question.score }}分</span>
                                </div>
                                
                                <div class="question-content">
                                    <div class="content-text">{{ question.content }}</div>
                                    
                                    <!-- 选择题选项 -->
                                    <div v-if="['单选题', '多选题'].includes(question.type)" class="options">
                                        <template v-if="question.options">
                                            <div v-for="(option, idx) in parseOptions(question.options)" 
                                                 :key="idx" 
                                                 class="option-item"
                                                 v-show="option">
                                                <span class="option-label">{{ String.fromCharCode(65 + idx) }}.</span>
                                                <span class="option-content">{{ option }}</span>
                                            </div>
                                        </template>
                                    </div>
                                    
                                    <div class="question-answer">
                                        <div class="answer-label">参考答案：</div>
                                        <div class="answer-content" v-if="['单选题', '多选题'].includes(question.type)">
                                            {{ formatChoiceAnswer(question.answer) }}
                                        </div>
                                        <div class="answer-content" v-else>
                                            {{ question.answer }}
                                        </div>
                                    </div>
                                    
                                    <div class="question-analysis" v-if="question.analysis">
                                        <div class="analysis-label">解析：</div>
                                        <div class="analysis-content">{{ question.analysis }}</div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import examApi from '@/api/exam';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();
const examDetail = ref({
    examId: null,
    examName: '',
    subject: '',
    startTime: '',
    duration: 0,
    totalScore: 0,
    status: '',
    questionList: [] // 修改为 questionList
});
const loading = ref(false);

// 获取考试详情
const fetchExamDetail = async () => {
    loading.value = true;
    try {
        const response = await examApi.getExamDetail(route.params.id);
        console.log('API返回的原始数据:', response); // 添加日志
        if (response.code === 200) {
            const data = response.data;
            // 确保 questionList 存在
            if (!data.questionList) {
                data.questionList = [];
            }
            examDetail.value = data;
            console.log('处理后的数据:', examDetail.value); // 添加日志
        } else {
            ElMessage.error(response.message || '获取考试详情失败');
        }
    } catch (error) {
        console.error('获取考试详情失败:', error);
        ElMessage.error('获取考试详情失败');
    } finally {
        loading.value = false;
    }
};

// 格式化日期时间
const formatDateTime = (dateTime) => {
    if (!dateTime) return '';
    const date = new Date(dateTime);
    return date.toLocaleString();
};

// 获取状态标签类型
const getStatusType = (status) => {
    const types = {
        '待添加试题': 'info',
        '待发布': 'warning',
        '待开始': 'primary',
        '已开始': 'success',
        '已结束': 'danger'
    };
    return types[status] || 'info';
};

// 返回上一页
const goBack = () => {
    router.back();
};

// 解析选项字符串为数组
const parseOptions = (optionsStr) => {
    try {
        return JSON.parse(optionsStr);
    } catch (e) {
        console.error('解析选项失败:', e);
        return [];
    }
};

// 获取题型对应的标签类型
const getQuestionTypeTag = (type) => {
    const types = {
        '单选题': 'success',
        '多选题': 'warning',
        '判断题': 'info',
        '填空题': 'primary',
        '问答题': 'danger'
    };
    return types[type] || 'info';
};

// 格式化选择题答案
const formatChoiceAnswer = (answer) => {
    if (!answer) return '';
    return answer.split('').join('、');
};

onMounted(() => {
    fetchExamDetail();
});
</script>

<style scoped>
.exam-detail {
    padding: 20px;
}

.detail-card {
    max-width: 1000px;
    margin: 0 auto;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    margin: 0;
}

.detail-content {
    padding: 20px 0;
}

.questions-section {
    margin-top: 30px;
}

.questions-section h3 {
    margin-bottom: 20px;
    color: #333;
}

.debug-info {
    font-family: monospace;
    white-space: pre-wrap;
    word-break: break-all;
}

.question-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-card {
    margin-bottom: 16px;
}

.question-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.question-index {
    font-weight: bold;
    color: #333;
}

.question-score {
    color: #ff6b6b;
    font-weight: bold;
}

.question-content {
    padding: 8px 0;
}

.content-text {
    font-size: 16px;
    color: #333;
    margin-bottom: 16px;
    line-height: 1.6;
}

.options {
    margin: 16px 0;
}

.option-item {
    margin: 8px 0;
    display: flex;
    gap: 8px;
}

.option-label {
    color: #666;
    min-width: 24px;
}

.option-content {
    color: #333;
}

.question-answer {
    margin: 16px 0;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.answer-label {
    color: #409EFF;
    font-weight: bold;
    margin-bottom: 8px;
}

.answer-content {
    color: #333;
}

.question-analysis {
    margin-top: 16px;
    padding: 12px;
    background-color: #fff9f9;
    border-radius: 4px;
}

.analysis-label {
    color: #F56C6C;
    font-weight: bold;
    margin-bottom: 8px;
}

.analysis-content {
    color: #666;
    line-height: 1.6;
}
</style> 